<template>
	<div>
		<Card>
			<div style="margin-bottom: 30px;">
				<label class="myLabel">应用分组：</label>
				<Select v-model="name" style="width:200px" @on-change="getList()">
					<Option v-for="item in nameList" :value="item.metadata.name" :key="item.metadata.name">{{ item.metadata.name }}</Option>
				</Select>
			</div>
			<!-- <Button style="margin: 10px 0;" type="primary" @click="createNsall = true" class="large">创建实例</Button>
			<Button style="margin: 10px 0;" type="primary" @click="setRouter" class="large">配置路由</Button> -->
			<Modal v-model="Instructions" title="使用说明编辑" width="800" footer-hide @on-cancel="cancel">
				<div style="display: none;">
					<div class="form-div">
						<label class="myLabel">containerName：</label>
						<Input v-model="mycontainerName" style="width: 500px" />
					</div>
					<div class="form-div">
						<label class="myLabel">uuid：</label>
						<Input v-model="myuuid" style="width: 500px" />
					</div>
					<div class="form-div">
						<label class="myLabel">port：</label>
						<Input v-model="myport" style="width: 500px" />
					</div>
				</div>
				<div class="form-div">
					<label class="myLabel">调用地址：</label>
					<Input v-model="myUrl" placeholder="请输入调用地址" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">账户：</label>
					<Input v-model="myAccount" placeholder="请输入账户" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">密码：</label>
					<Input v-model="myPassword" placeholder="请输入密码" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">描述：</label>
					<Input v-model="myDescription" type="textarea" placeholder="请输入密码" :rows="10" style="width: 500px" />
				</div>
				<div class="form-div">
					<Button type="primary" @click="createInstructions" v-show="status!=0" style="float: right;">新建使用说明书</Button>
					<Button type="primary" @click="editInstructions" v-show="status==0" style="float: right;">修改使用说明书</Button>
				</div>
			</Modal>
			<Modal v-model="editRouter" title="配置路由" width="800" footer-hide>
				<Input v-model="routerText" type="textarea" :rows="30" placeholder="Enter something..." />
				<Button type="primary" @click="reBoot" style="float: right;margin-left: 10px;margin-top:20px;">刷新配置</Button>
				<Button type="primary" @click="editRouterText" style="float: right;margin-top:20px;">修改配置</Button>
			</Modal>
			<Modal v-model="editApps" title="修改" width="800" footer-hide>
				<Input v-model="editAppsText" type="textarea" :rows="30" placeholder="Enter something..." />
				<Button type="primary" style="float: right;margin-left: 10px;margin-top:20px;" @click="update">更新</Button>
				<Button type="primary" style="float: right;margin-top:20px;" @click="editApps=false">取消</Button>
			</Modal>
			<Modal v-model="delectApps" title="删除" width="800" @on-ok="remove" @on-cancel="cancel">
				删除该项时，与之关联的应用也会一起被删除，是否删除该项？
			</Modal>
			<Modal v-model="relateUser" title="关联应用" width="800" footer-hide @on-cancel="cancel">
				<div class="form-div">
					<label class="myLabel">应用名称：</label>
					<Input v-model="appName" style="width: 500px"  placeholder="请输入应用名称"/>
				</div>
				<div class="form-div">
					<label class="myLabel">调用地址：</label>
					<Input v-model="appUrl" style="width: 500px"  placeholder="请输入调用地址"/>
				</div>
				<div class="form-div">
					<label class="myLabel">关联用户：</label>
					<Select v-model="appUser" style="width:200px;" placeholder="请选择关联用户">
						<Option v-for="item in peopleList" :value="item.userName" :key="item.uid">{{item.userName}}</Option>
					</Select>
				</div>
				<div class="form-div">
					<Button type="primary" @click="relate" v-show="!related" style="float: right;">关联应用</Button>
					<Button type="primary" @click="editRelate" v-show="related" style="float: right;">修改关联</Button>
				</div>
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
		</Card>
		<Modal v-model="logModal" title="日志" width="1000" footer-hide>
			<div class="app-log">
				<p>{{log}}</p>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '应用名称',
						key: 'metadata',
						width: '320px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '150px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '节点',
						key: 'spec',
						width: '100px',
						render: (h, params) => {
							return h('div', params.row.spec.nodeName)
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							let btnText = '关联应用'
							if (params.row.btnText === '修改关联') {
								btnText = '修改关联'
							}
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.editApps = true
											this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + '&nameSpace=' + myRow.namespace + '&name=' + myRow.name, {}, r => {
												if (r.data.code === 0) {
													this.editAppsText = JSON.stringify(r.data.data, null, 4)
												}
											})
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											let myRow1 = params.row.metadata
											this.$api.get(0, '/kuber/v2/userApp?relatedType=' + this.type + '&nameSpace=' + myRow1.namespace + '&relatedApp=' + myRow1.name, {}, r => {
												if (r.data.code === 0) {
													this.Instructions = true
													this.myuuid = r.data.data.uuid
													this.mycontainerName = r.data.data.appName
													this.myUrl = r.data.data.url
													this.$api.get(0, '/kuber/v2/containerDescription?uuid=' + this.myuuid, {}, data => {
														if (data.data.code === 0) {
															this.myport = data.data.data.port
															this.myAccount = data.data.data.account
															this.myPassword = data.data.data.password
															this.myDescription = data.data.data.description
															this.status = 0
														}
													})
												} else {
													this.$Message.warning('该应用还未关联')
												}
											})
										}
									}
								}, '编辑使用说明书'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'podDetails'
											})
											sessionStorage.name = params.row.metadata.name
											sessionStorage.nameSpace = params.row.metadata.namespace
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.logModal = true
											this.$api.get(0, '/kuber/v2/k8s/metrics/log?nameSpace=' + myRow.namespace + '&name=' + myRow.name, {}, r => {
												if (r.data.code === 0) {
													this.log = r.data.data
												}
											})
										}
									}
								}, '查看日志'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.relateUser = true
											this.relatedApp = params.row.metadata.name
											this.relatedNameSpace = params.row.metadata.namespace
											if (params.row.btnText === '修改关联') {
												this.$api.get(0, '/kuber/v2/userApp?relatedType=' + this.type + '&nameSpace=' + params.row.metadata.namespace + '&relatedApp=' + params.row.metadata.name, {}, r => {
													if (r.data.code === 0) {
														this.related = true
														this.appName = r.data.data.appName
														this.appUrl = r.data.data.url
														this.appUser = r.data.data.user
														this.relatedId = r.data.data.uuid
													}
												})
											}
										}
									}
								}, btnText),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.delectApps = true
											this.delectName = myRow.name
											this.delectSpace = myRow.namespace
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				name: '',
				nameList: [],
				nsName: '',
				Instructions: false,
				user: {},
				mycontainerName: '',
				myuuid: '',
				myport: '',
				// 调用地址
				myUrl: '',
				// 账户
				myAccount: '',
				// 密码
				myPassword: '',
				// 描述
				myDescription: '',
				status: 100,
				editId: 0,
				url: '',
				// 镜像地址列表
				urlList: [],
				// 临时名称组
				NameList: [],
				// 用户列表
				peopleList: [],
				timer: {},
				editRouter: false,
				routerText: '',
				// 应用类型
				type: 'Pod',
				// 标签
				labelkye: '',
				// 标签值
				labelvalue: '',
				// 修改面板
				editApps: false,
				// 修改配置文本
				editAppsText: '',
				// 删除面板
				delectApps: false,
				// 删除数据
				delectAppsText: '',
				// 删除name
				delectName: '',
				// 删除space
				delectSpace: '',
				// 日志框
				logModal: false,
				// 日志
				log: '',
				// 关联面板
				relateUser: false,
				// 应用名称
				appName: '',
				// 关联应用
				relatedApp: '',
				// 关联命名空间
				relatedNameSpace: '',
				// 调用地址
				appUrl: '',
				// 关联用户
				appUser: '',
				// 是否关联
				related: false,
				// 关联uuid
				relatedId: '',
				count: 0,
				pageSize: 5,
				myData: []
			}
		},
		methods: {
			// 展示信息回调
			show (index) {
				this.$Modal.info({
					title: '信息',
					content: `实例名称：${this.tableData[index].metadata.name}<br>标签：-<br>状态：${this.tableData[index].status.phase}<br>启动时间：${this.tableData[index].metadata.creationTimestamp},<br>所在节点：${this.tableData[index].spec.nodeName}`
				})
			},
			// 删除
			remove (index) {
				this.$api.delete(0, '/kuber/v2/k8s/apps?type=' + this.type + '&name=' + this.delectName + '&nameSpace=' + this.delectSpace, {}, r => {
					if (r.data.code === 0) {
						this.delectApps = false
						this.getList()
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
				})
			},
			// 命名选择的命名空间
			getList () {
				let str = ''
				if (this.name === '全部' || this.name === '') {
					str = ''
				} else {
					str = '&nameSpace=' + this.name
				}
				this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + str, {}, r => {
					if (r.data.code === 0) {
						this.myData = r.data.data.items
						this.count = this.myData.length
						this.getListByPage(1)
						for (let i = 0; i < this.tableData.length; i++) {
							this.$api.get(0, '/kuber/v2/userApp?relatedType=' + this.type + '&nameSpace=' + this.tableData[i].metadata.namespace + '&relatedApp=' + this.tableData[i].metadata.name, {}, r => {
								if (r.data.code === 0) {
									this.$set(this.tableData[i], 'btnText', '修改关联')
								} else {
									this.$set(this.tableData[i], 'btnText', '关联应用')
								}
							})
						}
					}
				})
			},
			createInstructions () {
				this.$api.post(0, '/kuber/v2/containerDescription', {
					uuid: this.myuuid,
					containerName: this.mycontainerName,
					port: this.myport,
					url: this.myUrl,
					account: this.myAccount,
					password: this.myPassword,
					description: this.myDescription
				}, r => {
					if (r.data.code === 0) {
						this.cancel()
						this.$Notice.info({
							title: '创建成功'
						})
						this.Instructions = false
					} else {
						this.$Notice.info({
							title: '创建失败'
						})
					}
				})
			},
			editInstructions () {
				this.$api.put(0, '/kuber/v2/containerDescription', {
					id: this.editId,
					uuid: this.myuuid,
					containerName: this.mycontainerName,
					port: this.myport,
					url: this.myUrl,
					account: this.myAccount,
					password: this.myPassword,
					description: this.myDescription
				}, r => {
					if (r.data.code === 0) {
						this.cancel()
						this.$Notice.info({
							title: '修改成功'
						})
						this.Instructions = false
					} else {
						this.$Notice.info({
							title: '修改失败'
						})
					}
				})
			},
			cancel () {
				this.mycontainerName = ''
				this.myuuid = ''
				this.myport = ''
				// 调用地址
				this.myUrl = ''
				// 账户
				this.myAccount = ''
				// 密码
				this.myPassword = ''
				// 描述
				this.myDescription = ''
				this.editId = 0
				this.appName = ''
				this.appUrl = ''
				this.appUser = ''
				this.status = 100
			},
			// 获取镜像列表
			getMirror () {
				// 获取项目id
				this.$api.post(0, '/kuber/imgs/getRepositories', {}, r => {
					this.urlList = []
					if (r.data.code === 0) {
						for (let a = 0; a < r.data.data.length; a++) {
							this.$api.post(0, '/kuber/imgs/getProjectsPage', {page: 1, limit: 1000, rid: r.data.data[a].project_id}, data => {
								if (data.data.code === 0) {
									if (data.data.data.length !== 0) {
										this.NameList = data.data.data
										for (var b = 0; b < this.NameList.length; b++) {
											this.$api.post(0, '/kuber/imgs/getDetail', {pname: this.NameList[b].name}, rData => {
												if (rData.data.code === 0) {
													for (var d = 0; d < this.NameList.length; d++) {
														for (var c = 0; c < rData.data.data.length; c++) {
															this.urlList.push(this.url + '/' + this.NameList[d].name + ':' + rData.data.data[c].name)
														}
													}
												}
											})
										}
									}
								}
							})
						}
					}
				})
			},
			// 获取调用地址
			getUrl () {
				this.$api.post(0, '/kuber/imgs/getSystemInfo', {}, r => {
					this.url = r.data.data.registry_url
				})
			},
			// 获取所有用户
			getPeople () {
				this.$api.get(0, '/usr/v2/user/list', {}, r => {
					if (r.data.code === 0) {
						this.peopleList = r.data.data
					}
				})
			},
			// 配置路由
			setRouter () {
				this.editRouter = true
				this.$api.get(0, '/kuber/description/config', {}, r => {
					if (r.data.code === 0) {
						this.routerText = r.data.data
					}
				})
			},
			// 修改路由
			editRouterText () {
				this.$api.post(0, '/kuber/description/config', {
					config: this.routerText
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('修改成功')
					} else {
						this.$Message.error('修改失败')
					}
				})
			},
			reBoot () {
				this.$api.post(0, '/kuber/description/reboot', {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('刷新成功')
					} else {
						this.$Message.error('刷新失败')
					}
				})
			},
			// 应用类型获取
			getType () {},
			// 更新
			update () {
				this.$api.post(0, '/kuber/v2/k8s/apps', {
					type: this.type,
					yml: this.editAppsText
				}, r => {
					if (r.data.code === 0) {
						this.editApps = false
						this.$Message.success('更新成功')
						this.getList()
					} else {
						this.$Message.error('更新失败')
					}
				})
			},
			// 关联
			relate () {
				this.$api.post(0, '/kuber/v2/userApp', {
					appName: this.appName,
					relatedApp: this.relatedApp,
					nameSpace: this.relatedNameSpace,
					relatedType: this.type,
					url: this.appUrl,
					user: this.appUser
				}, r => {
					if (r.data.code === 0) {
						this.cancel()
						this.$Message.success('关联成功')
					} else {
						this.$Message.error('关联失败')
					}
				})
			},
			// 修改关联
			editRelate () {
				this.$api.put(0, '/kuber/v2/userApp', {
					uuid: this.relatedId,
					appName: this.appName,
					relatedApp: this.relatedApp,
					nameSpace: this.relatedNameSpace,
					relatedType: this.type,
					url: this.appUrl,
					user: this.appUser
				}, r => {
					if (r.data.code === 0) {
						this.relateUser = false
						this.cancel()
						this.$Message.success('修改成功')
					} else {
						this.$Message.error('修改失败')
					}
				})
			},
			// 分页
			handlePage (page) {
				this.getListByPage(page)
			},
			// 根据页码获取数据
			getListByPage (page) {
				this.tableData = []
				for (let i = 0; i < this.pageSize; i++) {
					if (this.myData[i + (page - 1) * this.pageSize] !== undefined) {
						this.tableData.push(this.myData[i + (page - 1) * this.pageSize])
					}
				}
			}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			// 命名空间列表
			this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
				this.nameList = r.data.data.items
				this.nameList.push({metadata: {name: '全部'}})
			})
			// this.getMirror()
			// this.getUrl()
			this.getPeople()
			this.getList()
		},
		destroyed () {
			let my = this
			window.clearInterval(my.timer)
		}
	}
</script>

<style>
	label.myLabel {
		width: 120px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}
	label.myLabel span{
		font-size: 12px;
		color: #ddd
	}
	div.form-div {
		margin-bottom: 15px;
	}
</style>
